<template>
  <div>
    <div class="text-grey-8 q-mx-md">设置手机、邮箱、密码，让你的账号更安全。</div>
    <q-list no-border separator>
      <q-item>
        <q-item-section avatar>
          密码
        </q-item-section>
        <q-item-section>
          <span class="text-grey-6">已设置</span>
        </q-item-section>
        <q-item-section side>
          <q-btn color="primary" flat @click="openPassowrdDiglog">设置</q-btn>
        </q-item-section>
      </q-item>
      <!--<q-item>-->
        <!--<q-item-main>-->
          <!--<span>手机</span> <span class="text-grey-6">181****3323</span>-->
        <!--</q-item-main>-->
        <!--<q-item-side>-->
          <!--<q-btn color="primary" flat>设置</q-btn>-->
        <!--</q-item-side>-->
      <!--</q-item>-->
      <!--<q-item>-->
        <!--<q-item-main>-->
          <!--<span>邮箱</span> -->
          <!--<span class="text-grey-6">q1***@qq.com</span>-->
        <!--</q-item-main>-->
        <!--<q-item-side>-->
          <!--<q-btn color="primary" flat>设置</q-btn>-->
        <!--</q-item-side>-->
      <!--</q-item>-->
    </q-list>
    <!--<div class="text-grey-8 q-mt-lg">绑定第三方账号，方便你的登录。</div>-->
    <!--<q-list no-border separator>-->
      <!--<q-item>-->
        <!--<q-item-main>-->
          <!--<i class="iconfont icon-qq size-18 text-primary"></i> <span class="text-grey-6">57****3323</span>-->
        <!--</q-item-main>-->
        <!--<q-item-side>-->
          <!--<q-btn color="primary" flat>解绑</q-btn>-->
        <!--</q-item-side>-->
      <!--</q-item>-->
      <!--<q-item>-->
        <!--<q-item-main>-->
          <!--<i class="iconfont icon-weixin size-18 text-positive"></i> <span class="text-grey-6">未绑定</span>-->
        <!--</q-item-main>-->
        <!--<q-item-side>-->
          <!--<q-btn color="primary" flat>绑定</q-btn>-->
        <!--</q-item-side>-->
      <!--</q-item>-->
      <!--<q-item>-->
        <!--<q-item-main>-->
          <!--<i class="iconfont icon-weibo size-18 text-red"></i> <span class="text-grey-6">未绑定</span>-->
        <!--</q-item-main>-->
        <!--<q-item-side>-->
          <!--<q-btn color="primary" flat>绑定</q-btn>-->
        <!--</q-item-side>-->
      <!--</q-item>-->
    <!--</q-list>-->
    <a-dialog v-model="passwordModal" title="设置密码">
      <!--<q-select-->
        <!--v-model="validType"-->
        <!--float-label="选择验证方式"-->
        <!--radio-->
        <!--:options="validTypeOptions"-->
        <!--class="q-mb-lg"-->
      <!--/>-->
      <!--<q-input-->
        <!--v-model="verifyCode"-->
        <!--class="q-mb-lg"-->
        <!--type="number"-->
        <!--placeholder="输入6位验证码">-->
        <!--<q-btn color="blue-1" dense flat text-color="primary" @click="getCode" label="获取验证码"/>-->
      <!--</q-input>-->
      <q-input
        v-model="oldPassword"
        class="q-mb-lg"
        dense outlined
        max-lenght="16"
        type="password"
        placeholder="旧密码">
      </q-input>
      <q-input
        v-model="newPassword"
        class="q-mb-lg"
        dense outlined
        max-lenght="16"
        type="password"
        placeholder="8-16位新密码">
      </q-input>
      <q-input
        v-model="reNewPassword"
        class="q-mb-lg"
        dense outlined
        max-lenght="16"
        type="password"
        placeholder="重复输入新密码">
      </q-input>
      <div class="text-center">
        <q-btn :disabled="$v.resetPasswordGroup.$invalid"
               @click="resetPassword"
               color="primary"
               class="q-mb-lg"
               label="修改密码"/>
      </div>
    </a-dialog>
  </div>
</template>

<script>
  import { required, minLength, maxLength, sameAs } from 'vuelidate/lib/validators'

  export default {
    name: 'pageSettingsSafe',
    data: function () {
      return {
        passwordModal: false,
        oldPassword: '',
        newPassword: '',
        reNewPassword: ''
        // verifyCode: '',
        // validType: null,
        // validTypeOptions: [
        //   {label: '手机', value: 'phone'},
        //   {label: '邮箱', value: 'email'}
        // ]
      }
    },
    validations: {
      // verifyCode: {
      //   required, minLength: minLength(6), maxLength: maxLength(6)
      // },
      oldPassword: {
        required, minLength: minLength(8), maxLength: maxLength(16)
      },
      newPassword: {
        required, minLength: minLength(8), maxLength: maxLength(16)
      },
      reNewPassword: {
        required,
        minLength: minLength(8),
        maxLength: maxLength(16),
        sameAsPassword: sameAs('newPassword')
      },
      resetPasswordGroup: ['oldPassword', 'newPassword', 'reNewPassword']
    },
    methods: {
      openPassowrdDiglog () {
        this.passwordModal = true
        this.newPassword = ''
        this.reNewPassword = ''
        this.oldPassword = ''
        // this.verifyCode = ''
      },
      async getCode () {
        const { status, data } = await this.postRequest({
          api: '/api/user/resetpwd_code/'
        })

        if (status === 200) {
          this.notify('success', data)
        } else {
          this.notify('error', data.detail)
        }
      },
      async resetPassword () {
        const { status, data } = await this.postRequest({
          api: '/api/user/reset_pwd/',
          data: {
            password: this.oldPassword,
            re_password: this.newPassword
            // code: this.verifyCode
          }
        })

        this.passwordModal = false

        if (status === 200) {
          this.notify('success', '修改密码成功')
        } else {
          this.notify('error', data.detail)
        }
      }
    }
  }
</script>

<style lang="stylus">

</style>
